<template>
    <div class="container">
        <div class="form-box">
            <el-form ref="formRef" :rules="rules" :model="form" label-width="80px">
                <el-form-item label="服务地址" prop="addressId">
                    <el-card>
                        <el-descriptions
                                class="margin-top"
                                :column="2"
                                border>
                            <template #title>
                                <el-button type="primary" @click="handleSelectedAddressBook">选择</el-button>
                            </template>
                            <el-descriptions-item :width="160">
                                <template #label>
                                    <div class="cell-item">
                                        姓名
                                    </div>
                                </template>
                                {{form.name}}
                            </el-descriptions-item>
                            <el-descriptions-item :width="160">
                                <template #label>
                                    <div class="cell-item">
                                        手机号码
                                    </div>
                                </template>
                                {{form.phone}}
                            </el-descriptions-item>
                            <el-descriptions-item :span="2">
                                <template #label>
                                    <div class="cell-item">
                                        地址
                                    </div>
                                </template>
                                {{form.province}}{{form.city}}{{form.town}}{{form.detail}}
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-card>
                </el-form-item>
                <el-form-item label="服务类型" prop="serviceTypeId">
                    <el-select v-model="form.serviceTypeId" class="m-2" >
                        <el-option
                                v-for="item in typeOptions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                    <el-radio-group v-model="form.gender">
                        <el-radio :label="0">不限</el-radio>
                        <el-radio :label="1">男</el-radio>
                        <el-radio :label="2">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="结算方式" prop="chargeMode">
                    <el-radio-group v-model="form.chargeMode">
                        <el-radio :label="0">时薪</el-radio>
                        <el-radio :label="1">日薪</el-radio>
                        <el-radio :label="2">月薪</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="预期薪资" prop="maxSalary">
                    <el-input-number :min="1" v-model="form.maxSalary"></el-input-number>&nbsp;&nbsp;元
                </el-form-item>
                <el-form-item label="提供住宿" prop="accommodation">
                    <el-radio-group v-model="form.accommodation">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备注信息" prop="remark">
                    <el-input type="textarea" rows="5" v-model="form.remark"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit(formRef)" :disabled="buttonDisabled">发布需求</el-button>
                    <el-button @click="onReset(formRef)">重置信息</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!--地址簿选择-->
        <address-book-selector ref="addressBookDialogRef" @selectedAddressBook="selectedAddressBook"></address-book-selector>
    </div>
</template>

<script setup lang="ts" name="baseform">
    import {nextTick, reactive, ref} from 'vue';
import { ElMessage } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
import AddressCascadeSelector from '../components/AddressCascadeSelector.vue'
import ImageUploader from '../components/ImageUploader.vue'
import {addDemandApi, addHousekeeper, getTypeOptions} from "../api/index";
import AddressBookSelector from '../components/AddressBookSelector.vue'
    import router from "../router/index";

const rules: FormRules = {
    addressId: [{ required: true, message: '请选择地址信息', trigger: 'blur' }],
    maxSalary: [{ required: true, message: '请填写预期薪资', trigger: 'blur' }],
    chargeMode: [{ required: true, message: '请选择结算方式', trigger: 'blur' }],
    gender: [{ required: true, message: '请选择性别需求', trigger: 'blur' }],
    serviceTypeId: [{ required: true, message: '请选择服务类型', trigger: 'blur' }],
    accommodation: [{ required: true, message: '请选择是否提供住宿', trigger: 'blur' }],
    remark: [{ required: true, message: '请填写备注信息', trigger: 'blur' }],
};
const formRef = ref<FormInstance>();
const form = reactive({
    name: '',
    phone: '',
    province: '',
    city: '',
    town: '',
    detail: '',
    serviceTypeId: null,
    chargeMode: null,
    maxSalary: null,
    accommodation: 0,
    gender: 0,
    remark: '',
    addressId: null,
});
const typeOptions = ref([]);
const buttonDisabled = ref(false);

const getServiceTypeOptions = async () => {
    const res = await getTypeOptions({state: 1});
    if (res) {
        typeOptions.value = res.data;
    }
};
const initData = async () => {
    await getServiceTypeOptions();
};
initData();

const addressBookDialogRef = ref();
const handleSelectedAddressBook = () => {
    addressBookDialogRef.value.changeShow(true);
};
const selectedAddressBook = (param: any) => {
    console.log("selectedAddressBook", param);
    form.province = param.province;
    form.city = param.city;
    form.town = param.town;
    form.detail = param.detail;
    form.name = param.name;
    form.phone = param.phone;
    form.addressId = param.id;
};
// 提交
const onSubmit = (formEl: FormInstance | undefined) => {
    // 表单校验
    if (!formEl) return;
    buttonDisabled.value = true;
    try {
        formEl.validate(async (valid) => {
            if (valid) {
                console.log("addDemandApi", form);
                const res = await addDemandApi(form);
                if (res) {
                    onReset(formEl);
                    ElMessage.success('发布成功！');
                    await router.push("/demand")
                }
            } else {
                return false;
            }
        });
    } finally {
        buttonDisabled.value = false;
    }
};
// 重置
const onReset = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
    form.city = '';
    form.town = '';
    form.detail = '';
    form.name = '';
    form.phone = '';
};
</script>
